<template>
  <div class="dashboard-container">
    <!-- 顶部导航栏 -->
    <div class="header">
      <div class="header-left">
        <h1 class="logo">📝 任务管理</h1>
      </div>
      <div class="header-right">
        <el-button type="success" size="small" @click="$router.push('/statistics')" plain>
          <el-icon><PieChart /></el-icon>
          统计数据
        </el-button>
        <span class="username">{{ userInfo.username }}</span>
        <el-button type="danger" size="small" @click="handleLogout">
          <el-icon><SwitchButton /></el-icon>
          登出
        </el-button>
      </div>
    </div>

    <!-- 主内容区 -->
    <div class="main-content">
      <!-- 左侧分类栏 -->
      <div class="sidebar">
        <CategorySidebar
          :categories="categories"
          :selected-category-id="selectedCategoryId"
          @category-select="handleCategorySelect"
          @category-manage="showCategoryDialog = true"
          @refresh="loadCategories"
        />
      </div>

      <!-- 中间任务列表区 -->
      <div class="task-list-section">
        <TaskList
          ref="taskListRef"
          :selected-category-id="selectedCategoryId"
          :categories="categories"
          @refresh-categories="loadCategories"
          @timer-start="handleTimerStart"
        />
      </div>

      <!-- 右侧计时器面板 -->
      <div class="timer-panel-section">
        <TimerPanel ref="timerPanelRef" />
      </div>
    </div>

    <!-- 分类管理对话框 -->
    <CategoryDialog
      v-model="showCategoryDialog"
      :categories="categories"
      @refresh="loadCategories"
    />
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue'
import { useRouter } from 'vue-router'
import { ElMessage, ElMessageBox } from 'element-plus'
import { logout } from '../api/user'
import { getCategoryList } from '../api/category'
import CategorySidebar from '../components/CategorySidebar.vue'
import TaskList from '../components/TaskList.vue'
import CategoryDialog from '../components/CategoryDialog.vue'
import TimerPanel from '../components/TimerPanel.vue'

const router = useRouter()
const userInfo = ref(JSON.parse(localStorage.getItem('userInfo') || '{}'))
const categories = ref([])
const selectedCategoryId = ref(null)
const showCategoryDialog = ref(false)
const taskListRef = ref(null)
const timerPanelRef = ref(null)

// 加载分类列表
const loadCategories = async () => {
  try {
    const response = await getCategoryList()
    categories.value = response.data
  } catch (error) {
    console.error('加载分类失败:', error)
  }
}

// 选择分类
const handleCategorySelect = (categoryId) => {
  selectedCategoryId.value = categoryId
}

// 处理计时器启动
const handleTimerStart = () => {
  // 刷新计时器面板
  if (timerPanelRef.value) {
    timerPanelRef.value.loadCurrentTimer()
  }
}

// 登出
const handleLogout = async () => {
  try {
    await ElMessageBox.confirm('确定要退出登录吗？', '提示', {
      confirmButtonText: '确定',
      cancelButtonText: '取消',
      type: 'warning'
    })

    await logout()
    
    // 清除本地存储
    localStorage.removeItem('token')
    localStorage.removeItem('userInfo')
    localStorage.removeItem('timerState')
    
    ElMessage.success('已退出登录')
    router.push('/login')
  } catch (error) {
    if (error !== 'cancel') {
      console.error('登出失败:', error)
    }
  }
}

onMounted(() => {
  loadCategories()
})
</script>

<style scoped>
.dashboard-container {
  display: flex;
  flex-direction: column;
  height: 100vh;
  background-color: #f5f7fa;
}

.header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: 60px;
  padding: 0 20px;
  background: white;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  z-index: 100;
}

.header-left {
  display: flex;
  align-items: center;
}

.logo {
  font-size: 20px;
  font-weight: 600;
  color: #333;
  margin: 0;
}

.header-right {
  display: flex;
  align-items: center;
  gap: 15px;
}

.username {
  color: #666;
  font-size: 14px;
}

.main-content {
  display: flex;
  flex: 1;
  overflow: hidden;
  gap: 20px;
  padding: 20px;
}

.sidebar {
  width: 250px;
  background: white;
  border-right: 1px solid #e4e7ed;
  overflow-y: auto;
  flex-shrink: 0;
}

.task-list-section {
  flex: 1;
  overflow-y: auto;
  min-width: 0;
}

.timer-panel-section {
  flex: 1;
  overflow-y: auto;
  min-width: 0;
}
</style>
